<template>
  <div>
    <Card class="mt16"  :title="$t('备件采购记录')" >
      <Button v-if="showAddBtn" type="primary" class="mb16" @click="addItem">{{$t('添加备件采购')}}</Button>
      <div class="tableContent">
        <Table :columns="purchaseColumns" :data="purchaseDataSource">
          <template slot-scope="{ row,index }" slot="action">
            <span class="operationBtn" @click="removeItem(row,index)">{{$t('删除')}}</span>
          </template>
          <template slot-scope="{ row,index }" slot="backupStatus">
            <div class="backupStatus" :class="{backupStatus1:row.backupStatus==1,backupStatus2:row.backupStatus==2,backupStatus3:row.backupStatus==3}">
              <span></span>{{backupStatusList[row.backupStatus]}}
            </div>
          </template>
        </Table>
      </div>
    </Card>
    <addSpareParts ref="addSpareParts" @change="addSparePartsChange" :list.sync="purchaseDataSource"/>
  </div>
</template>

<script>
import addSpareParts from "@/views/fault/workOrderHall/modules/addSpareParts";
export default {
  name:"sparePartsPurchasingRecords",
  components:{addSpareParts},
  data(){
    return {
      purchaseDataSource:[],
      showAddBtn:true,
      backupStatusList:{1:this.$t("待采购"),2:this.$t("采购中"),3:this.$t("已到货")},
      purchaseColumns:[
        {
          title: this.$t('备件料号'),
          key: 'materielNo',
          align: 'center',
          minWidth:120
        },
        {
          title: this.$t('规格型号'),
          key: 'specification',
          align: 'center',
          minWidth:120
        },
        {
          title: this.$t('备件名称'),
          key: 'goodsName',
          align: 'center',
          minWidth:120
        },
        {
          title: this.$t('SAP申请单号'),
          key: 'purchaseOrderNo',
          align: 'center',
          minWidth:150
        },
        {
          title: this.$t('所需数量'),
          key: 'amountOfNeed',
          align: 'center',
          minWidth:120
        },
        {
          title: this.$t('采购数量'),
          key: 'amountOfPurchase',
          align: 'center',
          minWidth:120
        },
        {
          title: this.$t('库存数量'),
          key: 'amountOfStorage',
          align: 'center',
          width:120
        },
        {
          title: this.$t('备件采购状态'),
          key: 'backupStatus',
          align: 'center',
          minWidth:120,
          slot:"backupStatus"
        },
        // {
        //   title: this.$t('备件单价（元）'),
        //   key: 'purchasePrice',
        //   align: 'center',
        //   width:160
        // },
        {
          title: this.$t('备注'),
          key: 'comment',
          align: 'center',
          minWidth:120
        },
        {
          title: this.$t('到位日期'),
          key: 'arrivalDate',
          align: 'center',
          minWidth:120
        },
        {
          title: this.$t('操作'),
          key: 'gradeStr',
          align: 'center',
          slot:"action",
          fixed:"right",
          width:120
        },
      ],
    }
  },
  methods:{
    setData(maintainBackupVOS){
      this.purchaseDataSource = maintainBackupVOS
      this.showAddBtn = false
      this.purchaseColumns.splice(this.purchaseColumns.length-1,1)
    },
    addSparePartsChange(row){
      this.purchaseDataSource.push(row)
    },
    removeItem(row,index){
      this.purchaseDataSource.splice(index,1)
    },
    addItem(){
      this.$refs.addSpareParts.show();
    }
  }
}
</script>

<style lang="scss" scoped>
.backupStatus{
  span{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    vertical-align: inherit;
  }
  &.backupStatus1{
    color:red;
    span{
      background: red;
    }
  }
  &.backupStatus2{
    color:#FFBF00;
    span{
      background: #FFBF00;
    }
  }
  &.backupStatus3{
    color:green;
    span{
      background: green;
    }
  }
}
</style>
